<template>
  <el-row id="cpts-warn-table">
    <el-row v-if="!isViewShow" class="permission">
      没有权限!
    </el-row>

    <el-card v-else class="box-card">
      <div slot="header" class="clearfix">
        <span>统计报表</span>
      </div>

      <!--条件栏-->
      <el-row class="condition-layout">
        <el-select @change="onSelectChange" v-model="conditionValue" placeholder="请选择">
          <el-option
            v-for="item in conditionOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-row>

      <!--表格栏-->
      <el-row class="table-layout">
        <el-table
          :data="tableDatas"
          max-height="580"
          header-align="center"
          style="width: 100%">
          <el-table-column
            prop="createTime"
            label="告警时间"
            align="center">
          </el-table-column>
          <el-table-column
            prop="alarmName"
            align="center"
            label="事件名称">
          </el-table-column>
         <!-- <el-table-column
            prop="tagName"
            align="center"
            label="变量名">
          </el-table-column>-->
         <!-- <el-table-column
            prop="markValue"
            align="center"
            label="备注名称">
          </el-table-column>
          <el-table-column
            prop="warnType"
            align="center"
            label="告警类型">
          </el-table-column>-->
          <el-table-column
            prop="alarmLevel"
            label="告警等级"
            align="center">
          </el-table-column>
        <!--  <el-table-column
            prop="warnValue"
            align="center"
            label="告警值">
          </el-table-column>-->
         <!-- <el-table-column
            prop="limitValue"
            align="center"
            label="阀值">
          </el-table-column>
          <el-table-column
            prop="unit"
            align="center"
            label="单位">
          </el-table-column>-->
          <el-table-column
            :formatter="statusFormatter"
            prop="handleStatus"
            align="center"
            label="处理状态">
          </el-table-column>
          <el-table-column label="操作"  align="center"  fixed="right" width="140px">
            <template slot-scope="scope">
              <el-button :disabled="!isViewEdit"
                         size="mini"
                         type="text"
                         @click="handleInfo(scope.$index, scope.row)">详情</el-button>
              <el-button :disabled="!isViewEdit"
                         size="mini"
                         type="text"
                         @click="handleEdit(scope.$index, scope.row)">处理</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <!--分页栏-->
      <el-row class="pagination-layout">
        <el-pagination
          layout="prev, pager, next"
          :total="paginationCount"
          :current-page="currentPage"
          :page-size="pageSize"
          @current-change="onPageChange">
        </el-pagination>
      </el-row>
    </el-card>

    <!--处理弹窗-->
    <el-dialog :visible.sync="handlerDialogShow">
      <el-row slot="title">
        <span style="font-size: 18px">处理告警</span>
        <el-button @click="submitHandler" style="margin-left: 760px; padding: 6px 10px"type="primary"  :loading="false">提交</el-button>
      </el-row>

      <el-row>
        <span>处理状态:</span><br>
        <el-select  class="dialogMaginTop"  placeholder="请选择状态"  v-model="handlerValue">
          <el-option
            v-for="item in handlerOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-row>

      <el-row  class="dialogMaginTop">
        <span>处理意见:</span>
        <el-input
          class="dialogMaginTop"
          type="textarea"
          :rows="4"
          placeholder="请输入内容"
          v-model="handlerContent">
        </el-input>
      </el-row>


    </el-dialog>

    <!--详情弹窗-->
    <el-dialog title="详情" :visible.sync="infoDialogShow">
      <el-form :model="infoForm" label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="告警对象" prop="alarmName">
              <el-input disabled="true" v-model="infoForm.alarmName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="告警级别" prop="alarmLevel">
              <el-input disabled="true" v-model="infoForm.alarmLevel"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="告警时间" prop="createTime">
              <el-input disabled="true" v-model="infoForm.createTime"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="告警状态" prop="handleStatus">
              <el-input disabled="true" v-model="infoForm.handleStatus"></el-input>
            </el-form-item>
          </el-col>
         <!-- <el-col :span="8">
            <el-form-item label="处理人" prop="updator">
              <el-input disabled="true" v-model="infoForm.updator"></el-input>
            </el-form-item>
          </el-col>-->
          <el-col :span="8">
            <el-form-item label="处理时间" prop="handleTime">
              <el-input disabled="true" v-model="infoForm.handleTime"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="16">
            <el-form-item label="处理意见" prop="handleOpinion">
              <el-input
                disabled="true"
                type="textarea"
                :rows="3"
                v-model="infoForm.handleOpinion">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

  </el-row>
</template>

<script>
  export default {
    name: "warnTable",
    data(){
      return {
        isViewShow: false,
        isViewEdit: false,
        handlerDialogShow: false,
        infoDialogShow: false,
        activeName:'1',
        conditionOptions:[{label:'全部',value:-1},{label:'未处理',value:0},{label:'已处理',value:1},{label:'已恢复',value:3}],
        handlerOptions:[{label:'未处理',value:0},{label:'已处理',value:1},{label:'已忽略',value:2}],
        conditionValue: -1,
        pickerType:'date',
        dateFormat: 'yyyy-MM-dd',
        selectDate: new Date(),
        tableDatas:[],
        paginationCount: 0,
        currentPage:1,
        pageSize:10,
        handlerContent: '',
        handlerValue: '',
        editRow: '',
        infoForm: {
          alarmName: '',
          alarmLevel: '',
          updator: '',
          handleTime: '',
          handleOpinion: '',
          alarmName: '',
          alarmName: '',
          alarmName: '',
        }
      }
    },
    mounted(){
      let obj = this.validateGlobal.getPermission(12)
      this.isViewShow = obj.isViewShow
      this.isViewEdit = obj.isViewEdit
      this.askLists()
    },
    methods:{
      statusFormatter(row, column) {
        if(row.handleStatus === 0){
          return '未处理'
        }if(row.handleStatus === 1){
          return '已处理'
        }if(row.handleStatus === 2){
          return '已忽略'
        }if(row.handleStatus === 3) {
          return '已恢复'
        }
      },

      onSelectChange: function(value){
        this.conditionValue = value
        this.askLists()
      },

      handleEdit: function(index,row){
        if (this.handlerDialogShow) {
          this.handlerDialogShow = false
        }else{
          this.handlerDialogShow = true
        }
        this.editRow=row
      },

      handleInfo: function(index,row){
        if (this.infoDialogShow) {
          this.infoDialogShow = false
        }else{
          this.infoDialogShow = true
        }
        this.infoForm = row
      },

      onPageChange: function(currentPage){
        this.currentPage = currentPage;
        this.askLists()
      },

      askLists: function () {
        let _that = this
        let gateway = sessionStorage.getItem("gateway")
        let url = _that.ports.warnManage.warnList
        let askData = {
          sn: gateway,
          current: _that.currentPage,
          size: _that.pageSize,
          handleStatus:_that.conditionValue
        }
        this.http.get(url,askData, res => {
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
             _that.tableDatas = res.data.records
             _that.paginationCount = res.data.total
          }else{
            _that.$message('列表获取失败!');
          }
        })
      },

      submitHandler: function() {
        let _that = this
        let userId = sessionStorage.getItem("userId")
        let url = _that.ports.warnManage.warnHandler
        let askData = {
          userId: userId,
          handleOpinion: _that.handlerContent,
          handleStatus: _that.handlerValue,
          alarmLogId:_that.editRow.alarmLogId
        }
        this.http.postForm(url,askData, res => {
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
             _that.handlerDialogShow = false
             _that.askLists()
          }else{
            _that.$message('处理失败!');
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  #cpts-warn-table{

    .el-card{
      margin: 20px 20px 0 20px;
      height: 770px;

      .condition-layout{

      }

      .table-layout{
         margin-top: 20px;
      }

      .pagination-layout{
        text-align: center;
        margin-top: 10px;
      }


    }

    .evc-dialog-itemize{
      > :first-child.el-row{
        margin-top: 10px;
        margin-bottom: 20px;
      }
    }

    .evc-submit-layout{
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

    .dialogMaginTop{
      margin-top: 10px;
    }
  }
</style>
